<script setup>
import { reactive, watch, computed, ref } from 'vue'
const arr = JSON.parse(localStorage.getItem('todo-arr') || '[]')
const obj = reactive({
    form: {
        title: '',
        date: ''
    },
    arr,
    selected: -1, // -1 添加 0-n 修改
    currentIndex: 0
})

// 按照列表渲染
const onSubmit = (e) => {
    if (!obj.form.title || !obj.form.date) return alert('请填写完整')
    e.preventDefault()
    if (obj.selected === -1) {
        obj.arr.push({ ...obj.form, id: Date.now() + Math.floor(Math.random() * 1000) })
    } else {
        // 修改
        obj.arr[obj.selected] = { ...obj.arr[obj.selected], ...obj.form }
    }
    obj.form = {
        title: '',
        date: ''
    }
    obj.selected = -1
}
// 回显数据
const onEdit = (key, title, date) => {
    obj.selected = key
    obj.form.title = title
    obj.form.date = date
}

// 删除数据
const onRemove = (key) => {
    obj.arr.splice(key, 1)
}

// 监听arr的变化
watch(() => obj.arr, () => {
    localStorage.setItem('todo-arr', JSON.stringify(obj.arr))
}, { deep: true })

// 模拟数据
const mockData = () => {
    for (let i = 0; i < 5; i++) {
        obj.arr.push({
            title: '标题' + i,
            date: '2020-01-01',
            id: Date.now() + Math.floor(Math.random() * 10000)
        })
    }
}

// 滚动加载
const onScroll = (e) => {
    const scrollTop = e.target.scrollTop
    obj.currentIndex = Math.floor(scrollTop / 30)
}

// 计算渲染的属性
const newArr = computed(() => {
    return obj.arr.slice(obj.currentIndex, obj.currentIndex + 10)
})

const displayArr = ref(obj.arr)

// 拖拽开始
const handleDragStart = (event, index) => {
    event.dataTransfer.setData("text/plain", index);
};
// 拖拽结束
const handleDragOver = (event) => {
    event.preventDefault();
};

const handleDrop = (event, targetIndex) => {
    event.preventDefault();
    const originIndex = parseInt(event.dataTransfer.getData("text/plain"));
    // drop 时改变顺序
    const item = displayArr.value.splice(originIndex, 1)[0];
    // console.log(displayArr.value)
    displayArr.value.splice(targetIndex, 0, item);
};
</script>

<template>
    <div>
        <h3>{{ obj.selected === -1 ? '添加' : '编辑:' }}{{ obj.form.title }}</h3>
        <hr>
        <form action="">
            <label for="title">标题</label>
            <input type="text" id="title" placeholder="请输入代办标签" v-model="obj.form.title">
            <label for="date">日期</label>
            <input type="date" v-model="obj.form.date">
            <p><button @click.prevent="onSubmit">提交</button></p>
            <p><button @click.prevent="obj.selected = -1; obj.form.title = ''; obj.form.date = ''">添加</button></p>
            <p><button @click="mockData">mock数据</button></p>
        </form>
        <thead>
            <tr>
                <th>标题</th>
                <th>日期</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody style="display: block; height: 300px;overflow-y: auto;" @scroll="onScroll">
            <div :style="{ height: obj.arr.length * 30 + 'px' }">
                <div :style="{ height: obj.currentIndex * 30 + 'px' }"> </div>
                <tr v-for="(item, index) in displayArr" :key="item.id" style="height: 30px;" draggable="true"
                    @dragstart="handleDragStart($event, index)" @dragover="handleDragOver"
                    @drop="handleDrop($event, index)">
                    <td>{{ item.title }}</td>
                    <td>{{ item.date }}</td>
                    <td>
                        <button @click="onRemove(index)">删除</button>
                        <button @click="onEdit(index, item.title, item.date)">编辑</button>
                    </td>
                </tr>
            </div>
        </tbody>
    </div>
</template >
<style>
table {
    border: 1px solid #000;
    border-collapse: collapse;
}
th,
td {
    width: 100px;
    border: 1px solid #000;
    padding: 10px;
    text-align: center;
}
</style>